<template>
  <div class="dashboard wrapBox">
    <p class="p_tip">待办事项</p>
    <div class="dashboardBox">
      <div class="list">
        <div><i class="el-icon-tickets"></i></div>
        <div>
          <p>{{form.pendingEmergency}}</p>
          <p>紧急求助</p>
        </div>
      </div>
      <div class="list">
        <div><i style="color: #ffc107" class="el-icon-tickets"></i></div>
        <div>
          <p>{{form.pendingTransport}}</p>
          <p>未转运</p>
        </div>
      </div>
    </div>
    <p class="p_tip">统计信息</p>
    <div class="dashboardBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>核酸检测统计</span>
        </div>
        <div>
          <el-table
            header-cell-class-name="header-class"
            size="small"
            border
            :data="tableDate"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="小区名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="yangNum"
              label="累计阳性人数"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="notTransportNum"
              show-overflow-tooltip
              label="未转运人数">
            </el-table-column>
            <el-table-column
              prop="transportNum"
              show-overflow-tooltip
              label="已转运人数">
            </el-table-column>
            <el-table-column
              prop="cureNum"
              show-overflow-tooltip
              label="已治愈人数">
            </el-table-column>
            <el-table-column
              label="操作"
              width="80">
              <template slot-scope="{row}">
                <el-button type="text" size="small" @click="handleView(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination :small="true" :total="page_total" @pageChange="pageChange" :page="page"></Pagination>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>紧急求助统计</span>
        </div>
        <div>
          <el-table
            size="small"
            border
            :data="tableDate2"
            style="width: 100%">
            <el-table-column
              prop="buildingName"
              label="小区名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="累计待处理">
              <el-table-column
                prop="pendingTotal"
                label="总计"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="pendingAdd"
                label="当日新增"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="pendingHistory"
                label="历史累计"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column label="累计已处理">
              <el-table-column
                prop="handledTotal"
                label="总计"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="handledAdd"
                label="当日新增"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="handledHistory"
                label="历史累计"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
          </el-table>
          <Pagination :small="true" :total="page_total2" @pageChange="pageChange2" :page="page2"></Pagination>
        </div>
      </el-card>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px">
      <span>
        <el-table
          size="small"
          border
          :data="tableDate1"
          style="width: 100%">
            <el-table-column
              prop="buildingName"
              label="楼号"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="yangNum"
              label="累计阳性人数"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="notTransportNum"
              label="未转运人数"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="transportNum"
              label="已转运人数"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="cureNum"
              label="已治愈人数"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <Pagination :small="true" :total="page_total1" @pageChange="pageChange1" :page="page1"></Pagination>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        tableDate: [],
        tableDate1: [],
        tableDate2: [],
        form: {pendingEmergency:'',pendingTransport:''},
        page: {
          page_index: 1,
          page_limit: 10
        },
        page1: {
          page_index: 1,
          page_limit: 10
        },
        page2: {
          page_index: 1,
          page_limit: 10
        },
        page_total: 0, //总条数
        page_total1: 0, //总条数
        page_total2: 0, //总条数
        dialogVisible: false,
        title: '',
        id: null,
      }
    }
    ,
    methods: {
      pageChange(item) {
        this.page.page_index = item.page_index;
        this.page.page_limit = item.page_limit;
        this.nucleicInfo()//改变页码，重新渲染页面
      },
      pageChange1(item) {
        this.page1.page_index = item.page_index;
        this.page1.page_limit = item.page_limit;
        this.nucleicInfoDetail(this.id)//改变页码，重新渲染页面
      },
      pageChange2(item) {
        this.page2.page_index = item.page_index;
        this.page2.page_limit = item.page_limit;
        this.emergencyInfo()//改变页码，重新渲染页面
      },
      init() {
        this.$ajax.peng.workbenchTopData().then(data => {
          this.form = data.data
        })
      },
      nucleicInfo() {
        let params = {
          pageNo: this.page.page_index,
          pageSize: this.page.page_limit
        }
        this.$ajax.peng.nucleicInfo(params).then(data => {
          this.tableDate = data.data.list
          this.page_total = data.data.totalCount
        })
      },
      nucleicInfoDetail(id) {
        let params = {
          id: id,
          pageNo: this.page1.page_index,
          pageSize: this.page1.page_limit
        }
        this.$ajax.peng.nucleicInfoDetail(params).then(data => {
          this.tableDate1 = data.data.list
          this.page_total1 = data.data.totalCount
        })
      },
      emergencyInfo() {
        let params = {
          pageNo: this.page2.page_index,
          pageSize: this.page2.page_limit
        }
        this.$ajax.peng.emergencyInfo(params).then(data => {
          this.tableDate2 = data.data.list
          this.page_total2 = data.data.totalCount
        })
      },
      handleView(row) {
        this.dialogVisible = true
        this.title = row.name + '统计详情'
        this.nucleicInfoDetail(row.id)
        this.id = row.id
      }
    }
    ,
    mounted() {
      this.init()
      this.nucleicInfo()
      this.emergencyInfo()
    }

  }
</script>

<style lang="scss">
  .dashboard {
    .p_tip {
      line-height: 44px;
    }

    .dashboardBox {
      display: flex;
      /*justify-content: space-between;*/
      .el-card {
        width: 50%;
        margin-right: 10px;
      }

      .el-card__body {
        padding: 10px;
        height: 400px;
        overflow-y: auto;
      }
    }

    .list {
      width: 200px;
      height: 100px;
      border: 1px solid #e5e5e5;
      float: left;
      margin-right: 20px;
      text-align: center;
      padding-top: 25px;

      div {
        float: left;
        text-align: left;

        p {
          margin-left: 10px;
        }

        p:nth-child(1) {
          color: #0c7cb5;
          font-size: 16px;
          font-weight: bold;
        }
      }

      i {
        font-size: 48px;
        color: red;
        margin-left: 30px;
      }
    }
  }

</style>
